import React, { useState } from 'react';
import { Bubble, Sender, Welcome } from '@ant-design/x';
import { Space } from 'antd';
import { GetProp } from 'antd/es';
import { roles } from './MessageRenderer';

interface ChatMainProps {
  styles: any;
  content: string;
  setContent: React.Dispatch<React.SetStateAction<string>>;
  items: GetProp<typeof Bubble.List, 'items'>;
  onSubmit: (content: string) => void;
  senderHeader: React.ReactNode;
  attachmentsNode: React.ReactNode;
  isAgentRequesting: boolean;
  onCancel: () => void;
}

const ChatMain: React.FC<ChatMainProps> = ({
  styles,
  content,
  setContent,
  items,
  onSubmit,
  senderHeader,
  attachmentsNode,
  isAgentRequesting,
  onCancel,
}) => {
  // 欢迎节点
  const placeholderNode = (
    <Space direction="vertical" size={16} className={styles.placeholder}>
      <Welcome
        variant="borderless"
        icon={
          <img
            src="/knowledge.png"
            style={{ width: 40, height: 40 }}
            draggable={false}
            alt="logo"
          />
        }
        title="Hello, I'm Dynabook Knowledge AI Assistant"
      />
    </Space>
  );

  return (
    <div className={styles.chat}>
      {/* 消息列表 */}
      <Bubble.List
        items={items.length > 0 ? items : [{ content: placeholderNode, variant: 'borderless' }]}
        roles={roles}
        className={styles.messages}
      />
      {/* 输入框 */}
      <Sender
        value={content}
        header={senderHeader}
        onSubmit={onSubmit}
        onChange={setContent}
        prefix={attachmentsNode}
        loading={isAgentRequesting}
        className={styles.sender}
        onCancel={onCancel}
      />
    </div>
  );
};

export default ChatMain;
